<!DOCTYPE html>
<html>
	<head> 
	
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>轮播淡入淡出</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
	
		<style type="text/css">
		
		html,body,ul,li,p{
			margin: 0;
			padding: 0;
		}
		li{
			list-style: none;
		}
		a{
			text-decoration: none;
        }
        body{
            background: #999;
        }
        .box{
            width: 400px;
            margin: 0 auto;
            border: 10px solid #ccc;
            border-radius: 8px;
            margin-top: 100px;
        }
		
		.carousel{
			position: relative;
			width: 400px;
			height: 300px;
			overflow: hidden;
		}
		.carousel .img-ct{
			position: relative;
		}
		.carousel .img-ct img{
			width: 400px;
			height: 300px;
		}
		.carousel .img-ct:after{
			content: ' ';
			display: block;
			clear: both;
		}
		.carousel .img-ct li{
			position: absolute;
			display: none;
		}
		.arrow{
			position: absolute;
		    top: 50%;
		    margin-top: -15px;
		    width: 30px;
		    height: 30px;
		    line-height: 30px;
		    text-align: center;
		    background: #4E443C;
		    color: #fff;
		    border-radius: 30px;
		    box-shadow: 0 0 2px #999;
		    opacity: 0.8
		}
		.arrow:hover {
		    opacity: 1;
		}
		.pre{
			left: 10px;
		}
		.next{
			right: 10px;
		}
		ul.bullet {
			    position: absolute;
		    bottom: 10px;
		    left: 50%;
		    transform: translateX(-50%);
		}
		ul.bullet li {
		    width: 16px;
		    height: 4px;
		    border-radius: 2px;
		    background: #fff;
		    display: inline-block;
		    cursor: pointer;
		}
		ul.bullet li.active {
		    background: #666;
		}
		</style>

	</head>
	<body>
		<div class="box">
            <div class="carousel">
                <ul class="img-ct">
                    <li data-id=0><a href="#"><img src="http://img04.sogoucdn.com/app/a/100520024/519ec93ed0f0bf853637cb4755e158cc"></a></li>
                    <li data-id=1><a href="#"><img src="http://img04.sogoucdn.com/app/a/100520024/5e223e791c575337e25a9cb6715f2d5b"></a></li>
                    <li data-id=2><a href="#"><img src="http://img01.sogoucdn.com/app/a/100520024/b60087abf6ddc225892221a7e80c10dd"></a></li>
                    <li data-id=3><a href="#"><img src="http://img01.sogoucdn.com/app/a/100520024/5962f248d4b363af862f43bfbeea07e4"></a></li>
                </ul>
                <a class="pre arrow" href="#"><</a>
                <a class="next arrow" href="#">></a>
                <ul class="bullet">
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>


		
		<script type="text/javascript">		
			var $ct = $('.img-ct'),
				$items = $ct.children(),
				$pre = $('.pre'),
				$next = $('.next'),
				$bullet = $('.bullet'),
				imgWidth = $items.width(),
				imgCount = $ct.children().length;
			var curIdx = 0;
			var isAnimate = false;
			$next.on('click', function(){
				playNext();
			});
			$pre.on('click', function(){
				playPre();
			});
			$bullet.find('li').on('click', function(){
				var idx = $(this).index();
				play(idx);
			});
			play(0);
			autoPlay();
			function playNext(){
				play((curIdx+1)%imgCount)
			}
			function playPre(){
				play((imgCount+curIdx-1)%imgCount)
			}
			function play(idx){
				if(isAnimate) return;
				isAnimate = true;
				$items.eq(curIdx).fadeOut(500);
				$items.eq(idx).fadeIn(500, function(){
					isAnimate = false;
				});
				
				curIdx = idx;
				setBullet();
			}
			function setBullet(){
				$bullet.children().removeClass('active')
								  .eq(curIdx).addClass('active');
			}
			function stopAuto(){
				clearInterval(clock);
			}
			function autoPlay(){
				clock = setInterval(function(){
					playNext();
				}, 2000);	
			}
		</script>
	</body>
</html>
